<template>
  <div class="csSearch_wrap">
    <div class="sc-search" :class="[{'isMulti' : multi}, {'showOne' : !showAll}]" ref="scSearch">
      <!-- 加载中显示假禁用层，防止乱点 -->
      <div class="loading_bg" :class="[{'isMulti' : multi}]" v-show="isDisable"></div>
      <div class="serch_left" ref="searchLeft" >
        <el-form class="searchForm" label-position="right" label-width="80" @submit.native.prevent >
          <slot name="item"></slot>
        </el-form>
      </div>
      <div class="search_right" >
        <el-button type="primary" icon="el-icon-search" @click="upsearch('search')">搜索</el-button>
        <el-button plain  icon="el-icon-refreshRight" @click="upsearch('clear')" :class="{'noMargin': !multi}">刷新</el-button>
        <el-button plain @click="checkShow" v-if="multi && status" :icon="showAll ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" class="collect_button"></el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    isDisable: Boolean,
    multi: { type: Boolean, default: true }, // 是否多行
  },
  data() {
    return {
      showAll: false,
      status: false
    };
  },
  mounted(){
    this.$nextTick(() => {
      setTimeout(() => {
        this.isMulti()
      })
      window.addEventListener('resize', this.isMulti)
    });

  },
  beforeDestroy(){
    window.removeEventListener('resize')
  },
  methods: {
    checkShow() {
      this.showAll = !this.showAll
    },
    // 搜索、清空事件
    upsearch(type) {
      this.$emit('upsearch', type)
    },
    isMulti(){
        if(this.$refs.searchLeft !== null) {
        this.status = this.$refs.searchLeft.clientHeight > 40
      }
    }
  },

};
</script>

<style lang="scss" scoped>
.csSearch_wrap {
  width: auto;
  position: relative;
}
.loading_bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  cursor: no-drop;
}
  .sc-search {
    margin-bottom: 4px;
    display: flex;
    padding-right: 0;
    flex-wrap: wrap;
    ::v-deep .el-form-item {
      margin-right: 12px;
      margin-bottom: 0px;
      display: flex;
      align-items: center;
    }
    .searchForm {
      display: flex;
      flex-wrap: wrap;
    }
    ::v-deep .el-button {
      margin-right: 8px;
      margin-left: 0;
    }
    .noMargin {
      margin-right: 0;
    }

  }
  ::v-deep .el-input.is-disabled .el-input__inner {
    background: none;
  }

  .showOne {
    height: 42px;
    overflow: hidden;
  }

  .collect_button{
    padding: 9px 5px !important;
  }
  ::v-deep .el-form-item__content {
    width: 220px;
  }
  .isMulti {
    padding: 8px 0px;
    padding-bottom: 0;
    justify-content: space-between;
    ::v-deep .el-form-item {
      margin-bottom: 8px !important;
    }
    ::v-deep .el-button {
      margin-left: 8px;
      margin-right: 0;
      padding: 0 8px;
    }
    .serch_left {
      flex: 1;
      box-sizing: border-box;
    }
    .search_right {
      width: 160px;
      display: flex;
      justify-content: flex-end;
    }

  }
</style>
